<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
</head>
<body>
    <!-- 先传递给父组件,然后再传递到子组件 -->
    <div id="box">
      <button @click="sendAjax">点击</button>
      <!-- item这个是临时变量,然后传递给子类父类吧数据传递给子类 -->
      <file-item v-for="item in dataList" :mydata="item"></file-item>

     
      <file-detil></file-detil>
    </div>
  
    <script>
        let bus = new Vue()
        // bus.$on   监听
        // bus.$emit  触发

        // 扮演发布者,角色,发布了,点击详情,然后详情就会监听到变化,得到详情值
        Vue.component("fileItem",{
            props:["mydata"],
            template:`<div style="width: 100%;height: 150px;border: 3px solid;">
                    {{mydata}}
                    <button @click="showDteil">详情</button>aa
                </div>
            `,
           methods:{
            showDteil(){
                // 可以得到一些信息
                console.log(this.mydata,"1")
                bus.$emit("kkk",this.mydata)
            }
           }
        }) 
        Vue.component("fileDetil",{
            data(){
                return{
                    info:""
                }
            },
            // 生命周期,组件刚创建好,就开始订阅
            mounted() {
                console.log("start===>")
                // 参数别写成data,不显示
                bus.$on("kkk",(item)=>{
                    this.info = item
                })      
            },
            template:`<div style="width: 100%;height: 150px;border: 3px solid;">
                {{info}}
                </div>
            `,
           methods:{
           }
        }) 
        // 根组件
     let vm =    new Vue({
            el:"#box",
            data:{
                dataList:[],
                myData:[],
                isShow:false

            },
            methods:{
                sendAjax(){
                    fetch("./0-test.json").then(res=>res.json()).then(res=> this.dataList = res)
                }
            }
        })
    </script>
</body>
</html>